<template>
	<view class="shop-list">
		<view class="shop-title f-color">
			<view class="shop-item" v-for="(item,index) in shopList.data" :key="index" @tap="changeTab(index)">
				<view :class="shopList.currentIndex==index?'f-active-color':''">{{item.name}}</view>
				<view class='shop-icon'>
					<view class='iconfont icon-shangjiantou up' :class="item.status===1?'f-active-color':''"></view>
					<view class='iconfont icon-xiajiantou down' :class="item.status===2?'f-active-color':''"></view>
				</view>
			</view>
		</view>
		<line></line>
		<CommodityList :dataList="dataList"></CommodityList>
	</view>
	
</template>

<script>
		import CommodityList from '@/components/common/CommodityList.vue'
		import Line from '@/components/common/Line.vue'
		export default {
			data() {
				return {
					shopList:{
						currentIndex:0,
						data:[
							{name:"价格",status:1,key:'pprice'},
							{name:"折扣",status:0,key:'discount'},
							{name:"品牌",status:0}
						]
					},
					dataList:[]
				}
			},
		props:{
			keyword:String
		},
			components: {
				Line,
				CommodityList
			},
			mounted() {
				//请求数据
				this.getData()
			},
			computed:{
				orderBy(){
					//拿到当前的对象
					let obj =this.shopList.data[this.shopList.currentIndex];
					let val=obj.status=="1"?"asc":"desc"
					return{
						[obj.key]:val
					}
				}
			},
			methods:{
				
			async	getData(){
				let res=await this.$Request({
						url:"/api/goods/search",
						data:{
							name:this.keyword,
							...this.orderBy
						}
					})
	
					this.dataList=res.data.data
	
					console.log(...this.orderBy);
				},
				changeTab(index){
					this.getData()
				//索引值
				let idx=this.shopList.currentIndex;
				//具体哪一个对象
				let item =this.shopList.data[idx]
				if(idx==index){
					return item.status=item.status===1?2:1
				}
				//新的对象
				let newItem =this.shopList.data[index];
				item.status= 0;
				this.shopList.currentIndex=index;
				newItem.status=1
				}
			}
			
			}
</script>

<style scoped>
	.shop-title{
		display: flex;
	}
	.shop-item{
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80rpx;
	}
	.shop-icon{
		position: relative;
		margin-left:10rpx ;
	}
	.iconfont{
		width: 16rpx;
		height: 8rpx;
		position: absolute;
		left: 0;
	}

		.up{
		top:-22rpx
	}
	.down{
		top: -12rpx;
	}




</style>